<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>用户页面</title>
    <link rel="stylesheet" type="text/css" href="../jeasyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jeasyui/themes/icon.css">
    <script type="text/javascript" src="../jeasyui/jquery.min.js"></script>
    <script type="text/javascript" src="../jeasyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jeasyui/easyui-lang-zh_CN.js"></script>
    <script>

        $(function () {
            $("#btn-edit").click(function () {
                let array = $("#dg").datagrid('getSelections');
                if (array.length == 0) {
                    $.messager.alert('我的消息', '请选择要修改的数据', 'error');
                } else if (array.length > 1) {
                    $.messager.alert('我的消息', '只能选择一条记录进行修改', 'error');
                    $("#dg").datagrid('unselectAll');//取消我们选择复选框
                } else {
                    //填充修改表单
                    $("#edit-form").form('load', {
                        uid: array[0].uid,
                        uname: array[0].uname,
                        sex: array[0].sex,
                        nickname: array[0].nickname,
                        password: array[0].password,
                        avatar: array[0].avatar,
                        remark: array[0].remark
                    })

                    // 对图片进行上传
                    function setImagePreview(obj, localImagId, imgObjPreview) {
                        var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型
                        if (obj.value == '') {
                            $.messager.alert("让选择要上传的图片!");
                            return false;
                        }
                        else {
                            var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用
                            // 布尔型变量
                            var isExists = false;
                            //循环判断图片的格式是否正确
                            for (var i in array) {
                                if (fileContentType.toLowerCase() == array[i].toLowerCase()) {
                                    //图片格式正确之后，根据浏览器的不同设置图片的大小
                                    if (obj.files && obj.files[0]) {
                                        //火狐下，直接设img属性
                                        imgObjPreview.style.display = 'block';
                                        imgObjPreview.style.width = '400px';
                                        imgObjPreview.style.height = '400px';
                                        //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                                        imgObjPreview.src = window.URL.createObjectURL(obj.files[0]);
                                    }
                                    isExists = true;
                                    return true;
                                }
                            }
                            if (isExists == false) {
                                $.messager.alert("上传图片类型不正确!");
                                return false;
                            }
                            return false;
                        }
                    }


                    //弹出修改对话框
                    $("#edit-dialog").dialog({
                        closed: false,
                        buttons: [{
                            text: '保存',
                            iconCls: 'icon-save',
                            handler: function () {
                                $("#edit-form").form('submit', {
                                    url: '../users/updateUsers',
                                    onsubmit: function () {
                                        return $("#edit-form").form('validate');
                                    },
                                    success: function (flag) {
                                        if (flag) {
                                            $("#dg").datagrid('reload');
                                            $("#edit-form").form('clear');
                                            $("#edit-dialog").dialog({closed: true});
                                        }
                                    }
                                })

                            }
                        }, {
                            text: '重置',
                            iconCls: 'icon-redo',
                            handler: function () {
                                //重置表单数据
                                $("#edit-form").form('clear');

                            }
                        }]
                    })
                }
            })
            $("#btn-remove").click(function () {
                let array = $("#dg").datagrid('getSelections');
                if (array.length == 0) {
                    alert('请选择要删除的数据')
                } else {
                    let uids = [];//放置选择的标签id
                    for (let i in array) {
                        uids.push(array[i].uid);
                    }
                    $.post('../users/removeUsers', {"uids[]": uids}, function (flag) {
                        if (flag) {
                            $("#dg").datagrid('reload');
                            $.messager.show({
                                title: '我的消息',
                                msg: '删除数据成功。',
                                timeout: 5000,
                                showType: 'slide'
                            });
                        }

                    })
                }
            })
            $("#btn-add").click(function () {
                $("#add-dialog").dialog({
                    closed: false,
                    buttons: [{
                        text: '保存',
                        iconCls: 'icon-save',
                        handler: function () {
                            $("#add-form").form('submit', {
                                url: '../users/saveUsers',
                                onsubmit: function () {
                                    return $("#add-form").form('validate');

                                },
                                success: function (flag) {
                                    if (flag) {
                                        $("#add-form").form('clear');
                                        $("#add-dialog").dialog({closed: true});
                                        $("#dg").datagrid('reload');//重新刷新表格
                                        $.messager.show({
                                            title: '我的消息',
                                            msg: '添加成功',
                                            timeout: 500,
                                            showType: 'slide'
                                        });
                                    }
                                }
                            })
                        }
                    }]
                })

            })
            //更改用户状态
            $("#btn-stat").click(function () {
                let array = $("#dg").datagrid('getSelections');
                if (array.length == 0) {
                    $.messager.alert('我的消息', '请选择要更改状态的用户信息', 'error');
                } else if (array.length > 1) {
                    $.messager.alert('我的消息', '只能选择一条记录进行更改', 'error');
                } else {
                    $.post('../users/changeUserStat', {uid: array[0].uid}, function (flag) {
                        if (flag) {
                            $("#dg").datagrid('reload');
                            $.messager.show({
                                title: '我的消息',
                                msg: '成功更改用户状态',
                                timeout: 500,
                                showType: 'slide'
                            });
                        } else {
                            $.messager.alert('我的消息', '该用户是管理员，不能进行状态更改')
                        }
                    })
                }
            })
            $("#btn-role").click(function () {
                let array = $("#dg").datagrid('getSelections');
                if (array.length == 0) {
                    $.messager.alert('我的消息', '请选择要分配角色的用户信息', 'error');
                } else if (array.length > 1) {
                    $.messager.alert('我的消息', '只能选择一条记录分配角色信息', 'error');
                    $("#dg").datagrid('unselectAll');
                } else {
                    //弹出对话框，不需要填充表单
                    $("#add-role-dialog").dialog({
                        //  false  表示对应的对话框 显示  true 表示对话框进行隐藏
                        closed: false,
                        buttons: [{
                            text: '保存',
                            iconCls: 'icon-save',
                            handler: function () {
                                $("#add-role-form").form('submit', {
                                    url: '../roles/saveRole?uid=' + array[0].uid,
                                    onSubmit: function () {
                                        return $("#add-role-form").form('validate');
                                    },
                                    success: function (flag) {
                                        if (flag == -1) {
                                            $.messager.alert('我的消息', '该用户已经分配角色不能再次进分配', 'info');
                                        } else if (flag == 1) {
                                            $.messager.alert('我的消息', '分配角色成功', 'info');
                                            $("#add-role-dialog").dialog({closed: true});
                                        }
                                    }
                                })

                            }
                        }]
                    })
                }
            })

            $('#dg').datagrid({
                url: '../users/listUsers',
                fit: true,
                toolbar: '#tb',
                fitColumns: true,
                pagination: true,
                pagePosition: 'both',
                nowrap: false,
                columns: [[
                    {field: 'uid', checkbox: true},
                    {field: 'uname', title: '用户名称', width: 60},
                    {field: 'password', title: '密码', width: 60},
                    {field: 'nickname', title: '昵称', width: 60},
                    {field: 'sex', title: '性别', width: 100},
                    {
                        field: 'avatar', title: '头像', width: 80, formatter: function (val, rows, index) {
                            return '<img src="'+'../File/' + val + '" style=" width: 50px;height: 50px">'
                        }
                    },
                    {field: 'ctime', title: '创建时间', width: 80},
                    {field: 'mtime', title: '修改时间', width: 80},
                    {field: 'remark', title: '备注', width: 80},
                    {
                        field: 'stat', title: '状态', width: 80, formatter: function (val, rows, index) {
                            if (val == 0) {
                                return '<div style="color: green"><h4>启用</h4></div>'
                            } else if (val == 1) {
                                return '<div style="color: red"><h4>禁用</h4></div>'
                            } else {
                                return '<div style="color: blue"><h4>未知</h4></div>'
                            }

                        }
                    },
                ]]
            });
        })
    </script>
</head>
<body>
<table id="dg"></table>
<div id="tb">
    <shiro:hasPermission name="11">
        <a href="#" id="btn-add" class="easyui-linkbutton"
           plain="true" iconCls="icon-add">添加用户</a>
    </shiro:hasPermission>
<%--    <shiro:hasPermission name="22">--%>
        <a href="#" id="btn-edit" class="easyui-linkbutton"
           plain="true" iconCls="icon-edit">修改用户</a>
<%--    </shiro:hasPermission>--%>
    <shiro:hasPermission name="33">
        <a href="#" id="btn-remove" class="easyui-linkbutton"
           plain="true" iconCls="icon-remove">删除用户</a>
    </shiro:hasPermission>
    <shiro:hasPermission name="55">
        <a href="#" id="btn-stat" class="easyui-linkbutton"
           plain="true" iconCls="icon-lock">更改状态</a>
    </shiro:hasPermission>
    <shiro:hasPermission name="44">
        <a href="#" id="btn-role" class="easyui-linkbutton"
           plain="true" iconCls="icon-man">角色分配</a>
    </shiro:hasPermission>
</div>
<%--添加对话框--%>
<div id="add-dialog" class="easyui-dialog" title="添加用户信息" style="width:auto;height:auto"
     modal="true" closed="true">
    <form method="post" id="add-form">
        <table>
            <tr>
                <td>用户名称</td>
                <td><input class="easyui-validatebox" required="true" name="uname"></td>
                <td>用户密码</td>
                <td><input class="easyui-validatebox" required="true" name="password"></td>
            </tr>
            <tr>
                <td>用户昵称</td>
                <td><input class="easyui-validatebox" required="true" name="nickname"></td>
                <td>性别</td>
                <td><select class="easyui-combobox" required="true" name="sex" style="width:150px;">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select></td>
            </tr>
            <tr>
                <td>头像</td>
                <td><input validType="url" class="easyui-validatebox" required="true" name="avatar"></td>
                <td>备注</td>
                <td><input class="easyui-validatebox" name="remark"></td>
            </tr>
        </table>
    </form>
</div>
<%--修改对话框--%>
<div id="edit-dialog" class="easyui-dialog" title="修改用户信息" style="width:auto;height:auto"
     modal="true" closed="true">
    <form method="post" id="edit-form">
        <table>
            <tr>
                <td>用户名称</td>
                <td><input class="easyui-validatebox" required="true" name="uname">
                    <input type="hidden" name="uid">
                </td>
                <td>用户密码</td>
                <td><input class="easyui-validatebox" required="true" name="password"></td>
            </tr>
            <tr>
                <td>用户昵称</td>
                <td><input class="easyui-validatebox" required="true" name="nickname"></td>
                <td>性别</td>
                <td><select class="easyui-combobox" required="true" name="sex" style="width:150px;">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select></td>
            </tr>
            <tr>
                <td>头像</td>
                <td>
                        <input  class="easyui-validatebox" style="width:224px" runat="server" name="avatar" οnchange="javascript:setImagePreview(this,localImag,preview);" type="file" />
<%--                    <input id="idFile" class="easyui-validatebox" style="width:224px" runat="server" name="avatar" οnchange="javascript:setImagePreview(this,localImag,preview);" type="file" />--%>
<%--                    <input validType="url" class="easyui-validatebox" required="true" name="avatar">--%>
                </td>
                <td>备注</td>
                <td><input class="easyui-validatebox" name="remark"></td>
            </tr>
        </table>
    </form>
</div>
<div id="add-role-dialog" title="添加角色" class="easyui-dialog" model="true" closed="true"
     style="width: auto;height: auto">
    <form method="post" id="add-role-form">
        <table>
            <tr>
                <td>分配角色</td>
                <td>
                    <input class="easyui-combobox" name="rid" required="true"
                           data-options="valueField:'rid',textField:'rdesc',url:'../roles/listRoles'">
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>
